<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信传输助手</title>
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/vue@3.5.13.js"></script>
</head>
<body>
    <div id="app">
        <!-- 未登 -->
        <div class="wx-container" v-if="!isLogin">
            <h1>使用文件传输助手,手机电脑轻松互传文件</h1>
          <!-- 按钮登入 -->
         <div class="box" v-show="isBtnLogin">
            <img class="chang-btn" @click="loginType = 1" src="tp/二维码登录.png" alt="">
            <div class="wx-min-box">
                <div>微信文件传输助手网页版</div>
                <button class="wx-login" @click="onLogin()">点击登入</button>
                <p>使用鼠标点击登入传输文件</p>
            </div>
         </div>

        <!-- 二维码登入 -->
         <div class="box" v-show="!isBtnLogin">
                <img class="chang-btn" @clink="loginType = 0" src="tp/账号登录.png" alt="">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <img class="code-img" src="tp/code.png" alt="">
                    <p>使用手机微信扫码传输文件</p>
                </div>
         </div>
        </div>
        
        <!-- 已登区 -->
         <div class="wx-chat-box" v-else>
            <!-- 聊天头区 -->
            <div class="chat-header-main">
                <div>{{userInfo.name}}的文件传输助手({{userInfo.gender === 0 ? '♂' : '♀' }})</div>
                <div class="chat-del" >
                    <span class="del" @click="onLogout">X</span>
                </div>
            </div>

            <!-- 聊天内容区 -->
            <div class="chat-main-box">
                <div class="chat-main-info" v-if="userInfo.chatList.length">你可以使用【手机微信>文件传输助手】与电脑互传</div>
                <div class="chat-main-messages" ref="messageContainer" v-else>
                    <div class="message-box" v-for="item in userInfo.chatList">
                       <p class="message">{{item.content}}</p>
                       <img class="header" :src="userInfo.headerImg" alt="">
                    </div>
                </div>
            </div>

            <!-- 聊天输入区 -->
            <div class="chat-input-box">
                <textarea class="textarea" v-model.trim="message_value" @keyup.enter="onSend" name="" id="" cols="30" rows="8"></textarea>
                <div><button class="chat-send" @click="onSend">发送</button></div>
            </div>
         </div>
    </div>
    <script>
        const{createApp, ref, nextTick} = Vue
        createApp({
            setup(){
                const userInfo = ref({
                    name:'张3',
                    gender: 0,
                    headerImg: 'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000',
                    chatList: JSON.parse(localStorage.getItem('userInfo.value')) || []
                })
                const isLogin =ref(false)
                const loginType = ref(0)
                const message_value = ref("")
                const messageContainer = ref(null)
                const onLogin = () =>{
                    isLogin.value = true
                }
                const onSend = () => {
                    if(message_value.value.length === 0){
                        alert('请输入文字')
                        return
                    }
                    let message={
                        id: new Date().toString(),
                        content:message_value.value,
                    };
                    userInfo.value.chatList.push(message)
                    acrollToBottom();
                    message_value.value= ''
                    localStorage.setItem('chatList',JSON.stringify(userInfo.value))
                }
                const scrollToBottom = () => {
                    nextTick(() => {
                        if (messageContainer.value){
                            const container = messageContainer.value;
                            container.scrollTo({
                                top : container.scrollHeight,
                                behavior: 'smooth'
                            });
                        }
                    });
                }
                const onLogout = () =>{
                    isLogin.value = false
                    localStorage.removeItem('chatList')
                }
                return{
                    userInfo,
                    isLogin,
                    loginType,
                    message_value,
                    messageContainer,
                    onLogin,
                    onSend,
                    onLogout
                }
            }
        }).mount('#app')
    </script>
</body>
</html>